<template>
  <el-dialog v-model="dialogVisible" :title="isUpdateFlag ? '修改车辆': '增加车辆'" width="40%" @close="cancelFn">
    <p style="margin: 10px 20px 20px; color: rgb(64, 158, 255);">注：此操作为高危操作，请联系各方面确认该车辆必须添加且数据无误后，再进行车辆添加</p>
    <el-form ref="IncreaseCarFormRef" label-width="160px" :model="submitData" :rules="rules">
      <el-form-item label="vin" prop="vin" placeholder="请输入17位的vin号">
        <el-input v-model="submitData.vin" :disabled="isUpdateFlag"/>
      </el-form-item>
      <el-form-item label="项目" prop="project_name">
        <el-input v-model="submitData.project_name" placeholder="请输入EP开头的4位数，如EP41"/>
      </el-form-item>
      <el-form-item label="平台" prop="platform">
        <el-select v-model="submitData.platform" placeholder="请选择平台" style="width: 100%">
        <el-option label="ORIN" value="ORIN" />
        <el-option label="J3" value="J3" />
        <el-option label="TDA4" value="TDA4" />
        <el-option label="MDC" value="MDC" />
        <el-option label="NULL" value="null" />
      </el-select>
      </el-form-item>
      <el-form-item label="车辆配置">
        <el-input v-model="submitData.car_config" />
      </el-form-item>
      <el-form-item label="车辆类型" prop="vehicle_use_type">
        <el-select v-model="submitData.vehicle_use_type" style="width: 100%">
          <el-option label="量产车" :value="0"></el-option>
          <el-option label="研发车" :value="1"></el-option>
          <el-option label="台架" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="submitData.remark" />
      </el-form-item>
    </el-form>
    <template #footer>
      <p class="dialog-footer">
        <el-button @click="cancelFn">取消</el-button>
        <el-popconfirm title="确定提交吗?"  @confirm="submitFn">
            <template #reference>
              <el-button type="primary">提交</el-button>
          </template>
        </el-popconfirm>
        
      </p>
    </template>
  </el-dialog>
</template>
<script setup>
import { ElMessage } from 'element-plus';
import { ref, reactive } from 'vue';
import { CreateCarInfo,UpdateCarInfo } from '@/api/carConfigurationApi.js'

const emit = defineEmits(['feedbackFn'])
const dialogVisible = ref(false)
const IncreaseCarFormRef = ref(null)
let isUpdateFlag = ref(false)  // false: 创建 ， true:修改
let submitData = reactive({
  vin: '',
  project_name: '',
  platform: '',
  car_config: '',
  vehicle_use_type: null,
  remark: ''
})
let rules = reactive({
  vin: [
    { required: true, message: '请输入17位的vin号', trigger: 'blur' },
  ],
  project_name: [
    { required: true, message: '请输入以EP开头的项目名称', trigger: 'blur' },
  ],
  platform: [
    { required: true, message: '请选择平台', trigger: 'change' },
  ],
  vehicle_use_type: [
    { required: true, message: '请选择车辆类型', trigger: 'change' },
  ],
}
)
const switchVisible = (tag,data) => {
  dialogVisible.value = true
  // 修改
  if(data){
    isUpdateFlag.value = true
    submitData.car_config = data.carConfig
    submitData.platform = data.platform
    submitData.project_name = data.projectName
    submitData.remark = data.remark
    submitData.vehicle_use_type = data.vehicleUseType
    submitData.vin = data.vin
  }else{
    // 创建
    isUpdateFlag.value = false
    submitData.car_config = ''
    submitData.platform = ''
    submitData.project_name = ''
    submitData.remark = ''
    submitData.vehicle_use_type = null
    submitData.vin =''
  }
}
// 提交
const submitFn = () => {
  if(!IncreaseCarFormRef.value) return
  IncreaseCarFormRef.value.validate((valid) => {
    if(valid){
      // 创建的提交
      if(!isUpdateFlag.value){
          CreateCarInfo(submitData).then(res => {
          if (res.data.code === 200) {
            ElMessage({
              type: 'success',
              message: '创建成功'
            })
            cancelFn()
          }
        }).catch(err => {
          ElMessage({
              type: 'error',
              message: err.msg
            })
            cancelFn()
        })
      }else {
        // 修改的提交
        UpdateCarInfo(submitData).then(res => {
          if (res.data.code === 200) {
            ElMessage({
              type: 'success',
              message: '修改成功'
            })
            cancelFn()
            emit('feedbackFn')
          }
        }).catch(err => {
          ElMessage({
              type: 'error',
              message: err.msg
            })
            cancelFn()
        })
      }
    }
  })

}
//取消 、关闭弹窗
const cancelFn = () => {
  dialogVisible.value = false
  // 表单初始化
  IncreaseCarFormRef.value.resetFields()
}

defineExpose({
  switchVisible
})
</script>

<style lang="less"></style>